import React from 'react';
import {View,Text,Image,TouchableOpacity,Modal,TextInput,FlatList,ToastAndroid,StyleSheet} from 'react-native';
import {BASE_URL} from '../../common/BASE_URL';
import HttpUtils from '../../expand/dao/HttpUtils';
import ToastUtil from '../../utils/ToastUtil';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import {StylesConstant} from '../../common/Constant';


export default class SelectDialog extends React.Component{
    constructor(props){
        super(props)
        let SelectData=this.props.SelectData;
        this.state={
            SelectData:SelectData,//数据源
            visible:false,//控制model显示隐藏
            loading:false
        }
    }
 
    // componentWillReceiveProps(nxprops){//接收新的props
        
    // }

    //获取人员列表
    loadDataList(){
        this.state.loading = true
        HttpUtils.request({
            url: BASE_URL.apiBaseUrl + '/api/enforcementOfficer/noDataScopes',
            params: {
            }
        }).then((res) => {
            if(!res.status){
                console.log(res.content)
                let dataList=res.content.map(item=>{
                    item.chooseType=false
                    return item
                })
                this.setState({
                    loading: false,
                    SelectData: dataList||[]
                })
            }
        }).catch(() => {
            ToastUtil.info('网络异常,请稍后再试');
            this.setState({
                loading: false
            })
        });
    }

    show(){
        this.loadDataList()
        this.setState({
            visible: true,
        });
    }
   
    showListData(){//选中的内容显示
       
    }
 
    option(){//点击确定---关闭model---数据返回父组件
        this.setState({
            visible:false,
        });
        let actives=this.state.SelectData.filter((item)=>{
            if(item.chooseType){
                return item
            }
        })
        actives=actives.map((item)=>{
            delete item.chooseType
            return item
        })
        this.props.onChoose(actives)
    }
 
    cansol(){//取消之后将model关闭，数据清空
        this.setState({
            visible:false,
        });
    }
 
    selects(e,item){//选中元素---判断当前元素是否选中，选中将选中的元素添加到一个新的对象里面，否则设为空
        let s = e.target.checked;
        this.state.activeItemObj[item.id] = s?item.name:null;
        this.forceUpdate();
    }

    selectIt(row,index){
        this.state.SelectData[index].chooseType=!this.state.SelectData[index].chooseType
        this.forceUpdate();
    }
 
 
    render(){
        let {color,fontSize} = {...this.props.TextColor}
        // let key
        return (
            <View>
                <TouchableOpacity onPress={()=>this.setState({visible:true})}>
                <View style={{...this.props.style,backgroundColor:'white',minWidth:"95%",maxWidth:'95%'}}>
                    {this.showListData()}
                </View>
                </TouchableOpacity>
                {this.state.visible && <Modal animationType={'slide'} transparent={true} onRequestClose={()=>this.option()}>
                <View style={{backgroundColor:'rgba(0,0,0,.3)',width:'100%',height:'100%'}}>
                    <TouchableOpacity style={{width:'100%',height:'40%'}} onPress={()=>{
                        this.setState({visible:false});
                    }}></TouchableOpacity>
                <View style={{width:'100%',backgroundColor:'white',height:'60%',borderTopStartRadius:5,borderTopEndRadius:5}}>
                <View style={{justifyContent:'space-between',flexDirection:'row',padding:7,alignItems:'center',borderTopStartRadius:5,borderTopEndRadius:5,backgroundColor:'#44b2e1'}}>
                <Text style={{color:'white',fontSize:16}} onPress={()=>this.cansol()}>取消</Text>
                <Text style={{color:'white',fontSize:16}} onPress={()=>this.option()}>确定</Text>
                </View>
                <FlatList style={{height:'100%',marginTop:8}} data = {this.state.SelectData} keyExtractor={(item, index) => index.toString()}
                    renderItem={({item,index}) =>{
                        return(
                        <View  key={index} style={{
                            marginLeft:9,
                            marginBottom:8,
                            flexDirection:'row',
                            padding:5,
                            width:'98%',
                            alignContent:'center',
                            borderBottomColor:'#cacaca',
                            borderBottomWidth:1
                        }}>
                            <View style={styles.checkBox} >
                                <Text onPress={()=>this.selectIt(item,index)} style={item.chooseType?styles.chooseIt:null}/>
                            </View>
                            <View style={{alignItems: 'center',paddingLeft:10,height:50,flex: 1, flexDirection: 'column', justifyContent: 'space-between',marginBottom: 8}}>
                                <View style={{alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between',marginBottom: 8,width:"100%"}}>
                                    <View style={{flexDirection: 'row'}}>
                                        <FontAwesome
                                            name={'user'}
                                            size={16}
                                            style={{color: StylesConstant.themeIconColor, marginRight: 10}}
                                        />
                                        <Text style={{}}>{item.name && item.name.length > 6 ? item.name.substring(0, 5) + '.' : item.name}</Text>
                                        <Text style={{marginLeft:15}}>{item.gender==1?'男':'女'}</Text>
                                    </View>
                                    <View style={{flex: 1,marginLeft:15}}><Text>{item.administrativeQualificationCertificateNumber }</Text></View>
                                </View>
                                <View style={{alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between',}}>
                                    <View style={{flexDirection: 'row', flex: 1}}>
                                        <FontAwesome
                                            name={'building'}
                                            size={16}
                                            style={{color: StylesConstant.themeIconColor, marginRight: 10}}
                                        />
                                        <View style={{flex: 1}}><Text>{item.dept? item.dept.name: '- -'}</Text></View>
                                    </View>
                                </View>
                            </View >
                        </View>
                        )
                    }}
                    />
                </View>
                </View>
                </Modal>}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    checkBox:{
        width:20,
        height:20,
        borderRadius:10,
        backgroundColor:'#fff',
        alignContent:'center',
        justifyContent:'center',
        marginTop:11,
        borderWidth:1,
        borderColor:'#cacaca',
    },
    
    chooseIt:{
        width:10,
        height:10,
        borderRadius:8,
        backgroundColor:'#494949',
        left:4,
    },

    NoChooseIt:{
        width:10,
        height:10,
        borderRadius:8,
        backgroundColor:'#cacaca',
        left:4
    }
})

